<template>
	<div class="categorybox">
		<div class="searchboxbg">
			<div class="searchbox">
				<image src="../../static/home/search.png" class="searchicon"></image>
				<input type="text" value="" placeholder="请输入搜索内容"/>
				<image src="../../static/home/close.png" class="closeicon"></image>
			</div>
		</div>
		
		<div class="searchlistbox">
			<div class="searchlistitem" @click = 'gotoshoppingcart()' v-for='item in 4'>
				<div class="listimg">
					<image src="../../static/details/2222.png" mode=""></image>
				</div>
				<div class="itemmore">
					<div class="itemtext">
						<div class="itemtexts">
							长白母猪_母猪不拼价格拼质量正阳县长白公
						</div>
						<div class="itemtextz">
							长白母猪白母猪
						</div>
						<div class="itemtextx">
							可选规格：颜色
						</div>
					</div>
					<div class="itemprice">
						<div class="itempricel">
							￥ 108
						</div>
						<div class="itempricer">
							199人已购
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>


</template>

<script>
	export default {
		data() {
			return {
				hour: 10,
				minute:50,
				second:32
			};
		},
		onLoad: function() {
	
		},
		methods: {
			gotoshoppingcart(e) {
				uni.navigateTo({
					url: '../goodsdetails/goodsdetails' 
				});
			}
		}
	}
</script>

<style lang="less">
	.searchboxbg {
		height: 120rpx;
		width: 100%;
		background-color: #FFFFFF;
		.searchbox {
			background-color: #F0F0F0;
			width: 686rpx;
			margin: 0 auto;
			position: relative;
			top: 16rpx;
			height: 72rpx;
			border-radius:12rpx;
			image{
				width: 40rpx;
				height: 42rpx;
				margin: 16rpx 22rpx 14rpx 22rpx;
			}
			.searchicon {
				position: absolute;
				left: 0;
			}
			input{
				width: 100%;
				line-height:72rpx ;
				height: 72rpx;
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				padding-left: 72rpx;
				box-sizing: border-box;
			}
			.closeicon {
				position: absolute;
				right: 0;
			}
		}
	}
	

	

	.searchlistitem {
		width: 686rpx;
		margin: 0 auto 32rpx;
		display: flex;
		justify-content: space-between;
		.listimg{
			width: 240rpx;
			height: 240rpx;
			border-radius:8rpx;
			overflow: hidden;
			image {
				width: 100%;
				height: 100%;
			}
		}
		
	}
	.itemmore {
		width: 430rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.itemtexts {
			font-size:28rpx;
			font-weight:400;
			color:rgba(51,51,51,1);
			line-height:44rpx;
		}
		.itemtextz , .itemtextx {
			margin-top: 8rpx;
			font-size:24rpx;
			font-weight:400;
			color:rgba(153,153,153,1);
			line-height:40rpx;
		}
		.itemprice {
			display: flex;
			justify-content: space-between;
			.itempricel {
				font-size:32rpx;
				font-weight:500;
				color:rgba(24,108,242,1);
				line-height:48rpx;
			}
			.itempricer {
				font-size:24rpx;
				font-weight:400;
				color:rgba(51,51,51,1);
				line-height:48rpx;
			}
		}
	}
</style>
